<template>
  <div class="wrapper">
    <div class="rl-content white-card">
      <div class="search-box" ref="searchBar">
        <el-form :model="form" ref="form" size="medium" label-width="80px" class="demo-form">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="申请人">
                <el-input v-model="form.consultantName" placeholder="请输入用户名称" clearable style="width: 100%"
                  @change="handleSearch"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审核状态">
                <el-select v-model="form.tastStatus" placeholder="" style="width: 100%" @change="handleSearch">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="未通过" value="30"></el-option>
                  <el-option label="审核中" value="20"></el-option>
                  <el-option label="审核通过" value="10"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="申请部门">
                <el-cascader v-model="form.department" :options="depTree" :clearable="true" style="width: 100%" :props="{
                  label: 'dept',
                  value: 'dept_id',
                  children: 'gpc_second_class',
                }" @change="handleChange"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="申请时间">
                <el-date-picker style="width: 100%" v-model="form.applyTime" :picker-options="pickerOptions"
                  :clearable="true" type="daterange" range-separator="-" valueFormat="yyyy-MM-dd" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="handleSearch">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="顾问类型">
                <el-select v-model="form.consultantType" placeholder="" style="width: 100%" @change="handleSearch">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="内部职途顾问" value="10"></el-option>
                  <el-option label="外部职途顾问" value="20"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="20px">
                <el-button type="primary" size="small" @click="handleSearch">筛选</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap">
        <div class="operate-bar">
          <el-button v-has="'apply'" size="small" plain type="primary" @click="applyBecomeConsultant">申请成为顾问</el-button>
          <!-- <el-button
            plain
            round
            size="small"
            :loading="exportLoading"
            @click="exportAll"
            >{{ exportLoading ? "导出中..." : "一键导出" }}</el-button
          > -->
        </div>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table :data="showList" height="100%" v-loading="loading" tooltip-effect="light"
            :header-cell-class-name="'header_name_style'" :cell-style="{ color: '#000000' }">
            <el-table-column prop="consultantName" label="申请人" min-width="150"></el-table-column>
            <el-table-column prop="depName" label="申请部门" min-width="150"></el-table-column>
            <el-table-column prop="consultantType" label="申请顾问类型" min-width="150"></el-table-column>
            <el-table-column prop="examineStatus" label="审核状态" min-width="150">
              <template slot-scope="scope">
                <elan-svg :icon="scope.row.checkStatusLogo"></elan-svg>
                <span :class="scope.row.checkStatusLogo">{{
                  scope.row.examineStatus
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" min-width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="examineName" label="审核人" min-width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150">
              <template slot-scope="scope">
                <div class="operation-button">
                  <el-button type="text" @click="handleTaskDetail(scope.row)">申请详情</el-button>
                  <!-- <el-button type="text" @click="handleDeleteOne(scope.row)"
                >删除</el-button
              > -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog class="my-dialog" title="提示" :visible.sync="centerDialogVisible" top="7vh" width="900px"
      custom-class="no-header-dialog" :close-on-click-modal="false">
      <BecomeConsultant v-if="centerDialogVisible" @addSuccess="addSuccess" :show="centerDialogVisible"
        @closeBecomeConsultant="closeBecomeConsultant"></BecomeConsultant>
    </el-dialog>
    <CheckDialog v-if="TaskDetailDialogVisible" :visible.sync="TaskDetailDialogVisible" :selectedRow="selectedRow"
      @refresh="refresh" />
  </div>
</template>

<script>
import { getOrgTreeOld, getApplyConsultantList } from "@/api";
export default {
  components: {
    BecomeConsultant: () => import("./components/BecomeConsultant.vue"),
    CheckDialog: () => import("./components/CheckDialog.vue"),
  },
  data() {
    return {
      total: 0, // 数据条数
      selectedRow: {}, // 当前选中行
      TaskDetailDialogVisible: false,
      centerDialogVisible: false, // 申请成为顾问对话框
      form: {
        consultantName: "", // 申请人
        tastStatus: "", // 审核状态
        department: "", // 申请部门
        applyTime: "", //申请时间
        consultantType: "", // 顾问类型
      },
      exportLoading: false,
      loading: false,
      list: [],
      tableHeight: "auto",
      page: {
        currentPage: 1,
        pageSizes: 10,
        pageSize: 10,
      },
      depTree: [], // 部门树
      showList: [], // 处理分页用于展示的table数据 list是完整数据
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2023-09-01");
          const date2 = new Date(
            new Date().getFullYear() +
            "-" +
            ("0" + (new Date().getMonth() + 1)).substr(-2) +
            "-" +
            ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  async created() {
    // this.getData();
    window.addEventListener("resize", this.getHeight);
    this.getOrgTreeOld();
    this.getApplyConsultantList();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    closeBecomeConsultant() {
      this.centerDialogVisible = false;
    },
    refresh() {
      setTimeout(() => {
        this.getApplyConsultantList(); // 添加成功后关闭对话框然后刷新列表
      }, 1000);
    },
    addSuccess() {
      this.centerDialogVisible = false;
      this.getApplyConsultantList(); // 添加成功后关闭对话框然后刷新列表
    },
    applyBecomeConsultant() {
      this.centerDialogVisible = true;
    },
    changeUseStatus(useStatus) {
      console.log("useStatus", useStatus);
    },
    async getApplyConsultantList() {
      const params = {
        matchName: this.form.consultantName,
        consultantId: "",
        depIdList:
          this.form.department.length > 0
            ? [this.form.department[this.form.department.length - 1]]
            : [],
        consultantType: this.form.consultantType,
        examineStatus: this.form.tastStatus,
        startTime: this.form.applyTime === null ? "" : this.form.applyTime[0],
        endTime: this.form.applyTime === null ? "" : this.form.applyTime[1],
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        applyOaId: JSON.parse(sessionStorage.getItem("userInfo"))
          .user_source_id,
        orderByColumn: "id",
        orderBy: 20,
      };
      if (params.startTime) {
        params.startTime = this.form.applyTime[0] + " 00:00:00";
      }
      if (params.endTime) {
        params.endTime = this.form.applyTime[1] + " 23:59:59";
      }
      const res = await getApplyConsultantList(params);
      if (res.code === 200) {
        this.list = res.data;
        this.list.forEach((item) => {
          // 处理用户启用状态
          if (item.useStatus === 1) {
            item.useStatus = true;
          } else {
            item.useStatus = false;
          }
          // 处理顾问类型
          switch (item.consultantType) {
            case 10:
              item.consultantType = "内部职途顾问";
              break;
            case 20:
              item.consultantType = "外部职途顾问";
              break;
            default:
              break;
          }
          // 处理审核状态
          switch (item.examineStatus) {
            case 10:
              item.checkStatusLogo = "consultant-finish";
              item.examineStatus = "审核通过";
              break;
            case 20:
              item.checkStatusLogo = "consultant-shalou";
              item.examineStatus = "审核中";
              break;
            case 30:
              item.checkStatusLogo = "consultant-error";
              item.examineStatus = "未通过";
              break;
            default:
              break;
          }
        });
        this.total = res.pageparam.sums;
        // this.showList = this.list.slice(0, 10);
        this.showList = this.list;
      }
    },
    handleChange() {
      console.log(
        "这里是部门树的hancleChange",
        this.form.department[this.form.department.length - 1]
      );
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getApplyConsultantList();

    },
    handleSearch() {
      this.getApplyConsultantList();
    },
    handleReset() {
      this.form.consultantName = "";
      this.form.tastStatus = "";
      this.form.department = [];
      this.form.applyTime = null;
      this.form.consultantType = "";
      this.handleSearch();
    },
    getHeight() {
      this.tableHeight = window.innerHeight - 387;
    },
    exportAll() {
      console.log("这里是导出功能");
    },
    handleTaskDetail(row) {
      this.TaskDetailDialogVisible = true;
      this.selectedRow = row;
    },
    handleDeleteOne(row) { },
    getData() {
      this.list = [];
      for (let i = 0; i < 100; i++) {
        this.list.push({
          consultantName: "jiangt" + i,
          depName: "产品研发部",
          consultantType: "职途顾问",
          examineStatus: "审核中",
          createTime: "2024-01-12",
          examineName: "jiangt",
          checkStatusLogo: "consultant-shalou",
          useStatus: true,
        });
      }
      // this.showList = this.list.slice(0, 10);
      this.showList = this.list;
    },
    async getOrgTreeOld() {
      const params = {};
      const res = await getOrgTreeOld(params);
      if (res.code === "200") {
        this.depTree = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .rl-content {
    margin: 12px 12px 0 12px;
    background-color: #fff;

    .search-box {
      padding: 22px 24px 0 12px;
      border-bottom: 1px solid #e8e8e8;
    }

    .table-wrap {
      flex: 5.2;

      .operate-bar {
        padding-bottom: 20px;
        display: flex;
      }

      /deep/ .header_name_style {
        font-size: 14px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #6c7481;
      }

      .consultant-error,
      .consultant-finish,
      .consultant-shalou {
        margin-left: 5px;
      }

      .consultant-error {
        color: #ff7732;
      }

      .consultant-finish {
        color: #0cb354;
      }

      .consultant-shalou {
        color: #008fc4;
      }
    }
  }

  .my-dialog {
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }

  /deep/ .el-col-12 {
    width: 25%;
  }

  ::v-deep .no-header-dialog .el-dialog__header {
    display: none;
  }

  ::v-deep .no-header-dialog {
    border-radius: 8px;
  }
}
</style>
